<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>
<body>

<div id="app">

    <!-- 拼接参数传递的形式  内部通过{{$route.query.参数名}}取值-->
    <router-view></router-view>
</div>
<script>
    let first = {
        template: `
        <div>
        这是组件1
        <router-link to="/second?id=3&name=tom">
        传递给组件2
</router-link>
</div>
        `
    }
    let second = {
        template: `
        <div>
        这是组件2: 需要接收组件1传递的值:---->{{$route.query.id}}
        <br>
        这是组件一传递的用户名:---->{{$route.query.name}}
</div>`
    }
    let myRouter = new VueRouter({
        routes: [
            {path: "/first", component: first},
            {path: "/second", component: second},
            {path: "/", redirect: "/first"},
        ]
    })
    new Vue({
        el: "#app",
        data: {},
        router: myRouter,
    })
</script>
</body>
</html>